<template>
  <div class="borderType">
    <span class="border row1"></span>
    <span class="border row2"></span>
    <span class="border col1"></span>
    <span class="border col2"></span>
    <div class="borderType_content">
      <div class="borderType_Num" :style="color ? 'background-image:-webkit-linear-gradient('+color+')':'background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);'">
        {{ num ? num : 0 }}
      </div>
      <div class="borderType_type">
        {{ type }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    num: [String, Number],
    type: [String, Number],
    color: [String, Number],
  },
  data() {
    return {}
  },
}
</script>
<style scoped>
.borderType {
  position: relative;
  width: 180px;
  height: auto;
  border: 1px solid #1d81a0;
  background: rgba(4,89,168, 0.7);
  padding: 10px 10px 10px 10px;
  display: flex;
  justify-content: center;
}
.border {
  position: absolute;
  padding: 1px;
  border-style: solid;
  border-color: #31fff7;
  border-radius: 50%;
  background: #31fff7;
}
.row1 {
  border-width: 1px 1px 1px 1px;
  top: -2px;
  left: -2px;
}
.row2 {
  border-width: 1px 1px 1px 1px;
  top: -2px;
  right: -2px;
}
.col1 {
  border-width: 1px 1px 1px 1px;
  bottom: -2px;
  left: -2px;
}
.col2 {
  border-width: 1px 1px 1px 1px;
  bottom: -2px;
  right: -2px;
}
.borderType_content {
  width: 100%;
  height: auto;
}
.borderType_type {
  color: #ffffff;
  font-size: 12px;
  text-align: center;
}
.borderType_Num {
  font-size: 40px;
  text-align: center;
  font-weight: bold; 
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
</style>